<template>
  <el-form ref="ruleForm" :model="fromData" :label-position="labelPosition" :label-width="labelWidth + 'px'" :inline="inline" :rules="rules" class="demo-form-inline">
    <el-row>
      <el-form-item
        v-for="(item,index) in fromList"
        :key="index"
        :label="item.label"
        :prop="item.name"
        :style="item.style"
        :class="item.class"

      >
        <el-col :span="item.span || 24">
          <el-input
            v-if="item.category == 'input' && item.visibility"
            :placeholder="item.placeholder"
            v-model="fromData[item.name]"
            :type="item.type"
            :rows="item.rows"
            :maxlength="item.max"
            clearable
            class="form_input"
          />
          <el-select
            v-if="item.category == 'select' && item.visibility"
            :placeholder="item.placeholder"
            v-model="fromData[item.name]"
            clearable
            class="form_input"
          >
            <el-option
              v-for="(option,optIndex) in item.option"
              :key="optIndex"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
          <el-date-picker
            v-if="item.category == 'datePicker' && item.visibility"
            v-model="fromData[item.name]"
            :type="item.type"
            :placeholder="item.placeholder"
            :start-placeholder="item.startPlaceholder"
            :end-placeholder="item.endPlaceholder"
            value-format="item.format"
            class="form_input"
            clearable
          />

          <el-time-select
            v-if="item.category == 'timeSelect' && item.visibility"
            v-model="fromData[item.name]"
            :picker-options="{
              start: item.start,
              step: item.step,
              end: item.end
            }"
            :placeholder="item.endName ? item.startPlaceholder : item.placeholder"
          />
          <el-time-select
            v-if="item.category == 'timeSelect' && item.endName && item.visibility"
            v-model="fromData[item.endName]"
            :picker-options="{
              start: item.start,
              step: item.step ,
              end: item.end,
              minTime: fromData[item.name]
            }"
            :placeholder="item.endPlaceholder"
          />
          <el-cascader
            v-if="item.category == 'cascader' && item.visibility"
            :options="item.option"
            v-model="fromData[item.name]"
            :placeholder="item.placeholder"
            class="form_input"
          />
          <div v-if="item.category == 'radio' && item.visibility" class="form_input">
            <el-radio
              v-for="(radio,radioI) in (item.option || [item])"
              v-model="fromData[item.name]"
              :key="radioI"
              :label="radio.value"
            >
              {{ radio.label }}
            </el-radio>
          </div>
          <div v-if="item.category == 'checkbox' && item.visibility" >
            <el-checkbox-group v-model="fromData[item.name]" class="form_input">
              <el-checkbox
                v-for="(checkbox,checkboxI) in (item.option || [item])"
                :label="checkbox.value"
                :key="checkboxI"
              >
                {{ checkbox.label }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <el-button v-if="item.category == 'button'" :type="item.type" @click="submitForm"><i v-if="item.icon" :class="item.icon"/> {{ item.bLabel }}</el-button>
        </el-col>
      </el-form-item>
    </el-row>
  </el-form>
</template>
<script>
import draggable from 'vuedraggable'
import inputData from './Input.js'
import formItem from './formItem'
export default {
  name: 'XFrom',
  components: { draggable, formItem },
  props: {
    data: {
      type: [Array, Object],
      default: null
    },
    labelPosition: {
      type: String,
      default: 'right'
    },
    labelWidth: {
      type: Number,
      default: 100
    },
    inline: {
      type: Boolean,
      default: false
    },
    deBug: {
      type: Boolean,
      default: false
    },
    rules: {
      type: [Array, Object],
      default: null
    }
  },
  data() {
    return {
      fromData: {}
    }
  },
  computed: {
    fromList() {
      var log = (...info) => {
        this.deBug && console.log(info)
      }
      var _this = this
      if (!this.data) return
      let data = Array.isArray(this.data) ? this.data : [this.data]
      const setArrVal = el => {
        el.name && (_this.fromData = Object.assign({}, _this.fromData, { [el.name]: el.category == 'checkbox' || el.category == 'cascader' ? [] : el.value }))
      }
      data = data.map(e => {
        if (Array.isArray(e)) {
          e.forEach(es => {
            setArrVal(es)
          })
        } else {
          setArrVal(e)
        }
        const obj = Object.assign({}, inputData[e.category], e)
        log(obj, e)
        return obj
      })
      log(data)
      return data
    }
  },
  watch: {
    // fromList: (o, n) => {
    //   console.log(o)
    // }
  },
  created() {

  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit('submitForm', this.fromData)
        } else {
          console.error('error submit!!')
          return false
        }
      })
    },
    setcheckbox(name) {
      // console.log(name)

      // console.log(this.fromData)
      // console.log(1111)
      // console.log(name)
      // this.fromData[name] = []
      // console.log(this.fromData)
      // this.$set(this.fromData[name], [])
    }
  }
}
</script>
<style lang="scss" scoped>
  .form_input{
      /* width: 200px; */
  }
  .form_radio,.form_checkbox{
    /* width: 240px; */
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: 200px;
  }

</style>
